<template>
  <div class="auth-page">
    <div class="container page">
      <div class="row">
        <div class="col-md-6 offset-md-3 col-xs-12">
          <h1 class="text-xs-center">{{ isLogin ? '登录' : '注册' }}</h1>
          <p class="text-xs-center">
            <nuxt-link v-if="isLogin" to="/register">去注册</nuxt-link>
            <nuxt-link v-else to="/login">去登录</nuxt-link>
          </p>

          <ul class="error-messages">
            <li>{{ errorMsg }}</li>
          </ul>

          <form @submit.prevent="onSubmit">
            <fieldset v-if="!isLogin" class="form-group">
              <input
                required
                v-model="user.username"
                class="form-control form-control-lg"
                type="text"
                placeholder="Your Name"
              />
            </fieldset>
            <fieldset class="form-group">
              <input
                required
                v-model="user.email"
                class="form-control form-control-lg"
                type="email"
                placeholder="Email"
              />
            </fieldset>
            <fieldset class="form-group">
              <input
                required
                v-model="user.password"
                class="form-control form-control-lg"
                type="password"
                placeholder="Password"
              />
            </fieldset>
            <button class="btn btn-lg btn-primary pull-xs-right">
              {{ isLogin ? '登录' : '注册' }}
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { loginApi, registerApi } from './api/index'
// const Cookie = process.client ? require('js-cookie') : null
const Cookie = require('js-cookie')
/**
 * 已注册
 * admin22222@qq.com
 * admin22222
 */
export default {
  middleware: 'hasLogin', // 和middleware中的文件名对应
  name: 'Login',
  computed: {
    isLogin() {
      return this.$route.name === 'Login'
    }
  },
  data() {
    return {
      user: {
        email: '',
        password: '',
        username: ''
      },
      errorMsg: ''
    }
  },
  methods: {
    ...mapMutations(['setUser']),
    async onSubmit() {
      console.log(this.user)
      if (this.isLogin) {
        await this.login()
      } else {
        await this.register()
      }
    },
    async login() {
      if (!this.user.email || !this.user.password) {
        this.$message.warning('请输入邮箱和密码...')
        return
      }
      try {
        const res = await loginApi({
          user: this.user
        })
        console.log(res)
        this.setUser(res.data.user)
        console.log(Cookie)
        if (Cookie) {
          console.log('set')
          console.log(Cookie.set)
          Cookie.set('user', res.data.user, { expires: 1, path: '/' })
        }
        this.$message.info('登录成功...')
        this.$router.push('/')
      } catch (error) {
        console.log(error)
        this.errorMsg = error.message
      }
    },
    async register() {
      if (!this.user.email || !this.user.password || !this.user.username) {
        this.$message.warning('请输入邮箱和密码...')
        return
      }
      try {
        const res = await registerApi({
          user: this.user
        })
        console.log(res)
        this.$message.info('注册成功...')
        this.$router.push('/login')
      } catch (error) {
        console.log(error)
        this.errorMsg = error.message
      }
    }
  }
}
</script>

<style scoped></style>
